<template>
<div id="right-mapTools">
    <!-- 通用常规版 -->
    <!-- <div style="cursor: pointer; text-align: center" @click=" (rightMapToolsShow = false), (activedToolID = mapToolsData[nowIndex].name) " class="right-mapTools-btn" v-if="rightMapToolsShow">
        <img style="margin-bottom: 2px" src="../../../static/img/rightmapTools/gjx1.png" />
    </div>
    <transition name="el-zoom-in-center">
        <div v-if="!rightMapToolsShow" class="right-mapTools-tab">
             <ul>
                <li @click="(rightMapToolsShow = true), (activedToolID = '')" class="el-icon-d-arrow-right"></li>
                <li v-for="(item, index) in mapToolsData" :key="index" :title="item.name" :class="{ select: item.active }" @click="mapToolsDataClick(index, item, $event)" :style="{ border: index === mapToolsData.length - 1 ? 'none' : '' }">
                    <img v-show="!item.active" style="margin-top: -4px" :src="require('../../../static/img/toolIcon/' + (item.extraInfoMap.MENUICON ? item.extraInfoMap.MENUICON : 'moren') + '.png') " />
                    <img v-show="item.active" style="margin-top: -4px" :src="require('../../../static/img/toolIcon/' + (item.extraInfoMap.MENUICON ? item.extraInfoMap.MENUICON : 'moren') + '-c.png') " />
                    {{ showTitle ? item.name : "" }}
                </li>
            </ul>
        </div>
    </transition> -->
    <!-- 新版 -->
    <transition name="el-zoom-in-center">
        <div class="right-mapTools-tab">
            <ul>
                <li v-for="(item, index) in mapToolsData" v-show="showiQuery" :key="index" :title="item.name" :class="{ select: item.active }" @click="mapToolsDataClick(index, item, $event)" :style="{ border: index === mapToolsData.length - 1 ? 'none' : '' }">
                    <img v-show="!item.active" style="width: 30px; padding: 2px;" :src="imgpath + (item.extraInfoMap.MENUICON ? item.extraInfoMap.MENUICON : 'moren') + '.png' " />
                    <img v-show="item.active" style="width: 30px; padding: 2px;" :src="imgpath + (item.extraInfoMap.MENUICON ? item.extraInfoMap.MENUICON : 'moren') + '-c.png' " />
                    <div style="font-size: 12px;">{{item.name}}</div>
                </li>
            </ul>
        </div>
    </transition>
    <!-- <keep-alive v-if="mapView.type === '3d'" :include="[]">
        <component v-bind:is="dynamicComponent"></component>
    </keep-alive> -->
    <div v-if="mapView.type === '2d'" v-for="(item, index) in mapToolsData" :key="index">
        <div v-if="item.name === 'i查询' && item.active">
            <i-query ref="iqueryref"></i-query>
        </div>
        <!-- <div v-if="item.name === '空间量算' && item.active">
            <spatial-measurement></spatial-measurement>
        </div> -->
        <!-- <div v-if="item.name === '空间查询' && item.active">
            <spatia-query :spatiaQuery="item.name"></spatia-query>
        </div> -->
        <!-- <div v-if="item.name === '定位' && item.active">
            <place-locator :placeLocator="item.name"></place-locator>
        </div> -->
        <!-- <div v-if="item.name === '打印输出' && item.active">
            <printout-panel :printoutPanel="item.name"></printout-panel>
        </div> -->
    </div>
</div>
</template>

<script>
import MapManager from "../../../core/mapManager";
// import measureHelper from "../../core/measureHelper";
// import MapCommon from "../../core/mapCommon.js";
import PubSub from "pubsub-js";
import iQuery from "./iQuery";
// import spatiaQuery from "./spatiaQuery";
// import placeLocator from "./placeLocator";
export default {
    data() {
        return {
            // imgpath: window.location.origin + window.location.pathname + "static/imgs/toolIcon/",
            imgpath: "../../../../static/imgs/toolIcon/",
            mapView: null,
            nowIndex: -1,
            rightMapToolsShow: true,
            showTitle: true,
            mapToolsData: [],
            activedToolID: "",
            // dynamicComponent: null,
            // 判断显示哪个定位窗口
            PublicPopUpName: "",
            timeShaftLayer: null,
            showiQuery: true,
        };
    },
    components: {
        iQuery,
        // spatiaQuery,
    },
    methods: {
        mapToolsDataClick(index, item, clickEvent) {
            let self = this;
            if (item.name === "删除") {
                self.mapView.graphics.removeAll()
                // measureHelper.handleDelete(self.mapView);
            } else {
                if (this.mapView.type === "2d") {
                    if (item.active) {
                        if (item.name === "i查询") {
                            self.$refs.iqueryref[0].closeIquery(); //清除i查询
                        }
                        item.active = false;
                    } else {
                        if (item.name === "i查询") {
                            this.mapToolsData.forEach((item1) => {
                                if (item1.name === "空间查询") {
                                    item1.active = false;
                                }
                            });
                            item.active = true;
                            setTimeout(() => {
                                self.$refs.iqueryref[0].initIquery(); //初始化i查询
                            }, 500);
                        } else if (item.name === "空间查询") {
                            this.mapToolsData.forEach((item1) => {
                                if (item1.name === "i查询") {
                                    item1.active = false;
                                }
                            });
                            // MapCommon.removeLayerGeo(self.mapView);
                            // measureHelper.handleDelete(self.mapView);
                            item.active = true;
                        } else if (item.name === "打印输出") {
                            this.mapToolsData.forEach((item1) => {
                                if (item1.name !== "打印输出") {
                                    item1.active = false;
                                }
                            });
                            // MapCommon.removeLayerGeo(self.mapView);
                            // measureHelper.handleDelete(self.mapView);
                            item.active = true;
                        } else {
                            item.active = !item.active;
                        }

                        // measureHelper.handleDelete(self.mapView);

                        function getOffset(el) {
                            var _x = 0;
                            var _y = 0;
                            while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
                                _x += el.offsetLeft - el.scrollLeft;
                                _y += el.offsetTop - el.scrollTop;
                                el = el.offsetParent;
                            }
                            return {
                                top: _y,
                                left: _x
                            };
                        }
                        if (clickEvent && clickEvent.target) {
                            window.g.toolsBarClickingPosition = getOffset(clickEvent.target);
                        }
                    }
                    this.$forceUpdate();
                } else {
                    item.active = !item.active;
                    if (item.name == "清除") {
                        try {} catch (error) {}
                        setTimeout(() => {
                            item.active = false;
                        }, 500);
                    } else {
                        this.$forceUpdate();

                        function getOffset(el) {
                            var _x = 0;
                            var _y = 0;
                            while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
                                _x += el.offsetLeft - el.scrollLeft;
                                _y += el.offsetTop - el.scrollTop;
                                el = el.offsetParent;
                            }
                            return {
                                top: _y,
                                left: _x
                            };
                        }
                        if (clickEvent && clickEvent.target) {
                            window.g.toolsBarClickingPosition = getOffset(clickEvent.target);
                        }
                        this.activedToolID = item.extraInfoMap.MENUCODE;
                        // let path = "tools/" + this.activedToolID;
                        // this.dynamicComponent = require(`../../../3Dcommons/${path}.vue`).default;
                        // if (!item.active) {
                        //     this.dynamicComponent = null;
                        // }
                        this.mapToolsData.forEach((item1, index1) => {
                            if (item1.name !== item.name) {
                                item1.active = false;
                                this.$forceUpdate();
                                //     this.activedToolID = item.extraInfoMap.MENUCODE;
                                //     let path = "tools/" + this.activedToolID;
                                //     this.dynamicComponent = require(`../../../3Dcommons/${path}.vue`).default;
                            } else {
                                //     this.dynamicComponent = null
                                //     item.active = false
                                //     this.$forceUpdate()
                            }
                        });
                    }
                }
            }
        },
        initToolsData作废() {
            const self = this;
            self.nowIndex = -1;
            self.activedToolID = "";
            // self.dynamicComponent = null;
            self.mapToolsData = [];
            MapManager.getMapViewByIDAsy("mainMap").then((mapView) => {
                self.mapView = mapView;
                if (self.menuData) {
                    self.menuData.forEach((item, index) => {
                        if ((self.mapView.type === "2d" && item.extraInfoMap.MENUCODE === "commonTools") || (self.mapView.type === "3d" && item.extraInfoMap.MENUCODE === "commonTools3D")) {
                            self.mapToolsData = item.list;
                        }
                    });
                    self.mapToolsData.forEach((item, index) => {
                        item.active = false;
                    });
                    self.$forceUpdate();
                } else {
                    self.$message.warning("工具栏数据为空");
                }
            });
        },
        closeComponent(data) {
            this.mapToolsData.forEach((item, index) => {
                if (item.name === data) {
                    item.active = false;
                    this.$forceUpdate();
                }
            });
        },
    },
    created() {
        this.mapToolsData = [];
        // this.menuData = window.g.Project.menuData //因为没有相关运维配置和接口，此块配置写到了配置文件中
    },
    computed: {
        menuData() {
            // return this.$store.state.menuData; //vuex接受值
            return window.g.Project.menuData
        },
    },
    mounted() {
        const self = this;
        // 自定义激活组件事件
        self.custom_activation_event = PubSub.subscribe("custom_activation_event", (msg, data) => {
            let index = -10;
            for (let i = 0; i < self.mapToolsData.length; i++) {
                if (self.mapToolsData[i].name === data.tool.name) {
                    index = i;
                    break;
                }
            }
            if (self.nowIndex !== index && data.active) {
                self.timeShaftLayer = data.tool.resoucedata; //资源目录点击时间轴专用。。。
                self.mapToolsDataClick(index, self.mapToolsData[index]);
            } else if (!data.active) {
                self.contentInclude = "";
                self.nowIndex = -1;
            }
        });
        self._iQueryShow = PubSub.subscribe("iQueryShow", (msg, data) => {
            self.showiQuery = data
            self.$forceUpdate();
        });

        self.nowIndex = -1;
        self.activedToolID = "";
        // self.dynamicComponent = null;
        self.mapToolsData = [];
        MapManager.getMapViewByIDAsy("mainMap").then((mapView) => {
            self.mapView = mapView;

            if (self.menuData) {
                self.menuData.forEach((item, index) => {
                    if ((self.mapView.type === "2d" && item.extraInfoMap.MENUCODE === "commonTools") || (self.mapView.type === "3d" && item.extraInfoMap.MENUCODE === "commonTools3D")) {
                        self.mapToolsData = item.list;
                    }
                });
                self.mapToolsData.forEach((item, index) => {
                    item.active = false;
                });
                self.$forceUpdate();
            } else {
                self.$message.warning("工具栏数据为空");
            }
        });
    },
    beforeDestroy() {
        PubSub.unsubscribe(this._iQueryShow)
        PubSub.unsubscribe(this.custom_activation_event)
    }
};
</script>

<style scoped>
.right-mapTools-tab {
    width: fit-content;
    /* height: 42px; */
    /* background: #ffffff; */
    /* box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.24); */
    border-radius: 4px;
    position: absolute;
    top: 85px;
    right: 15px;
    display: flex;
    align-items: center;
    /* padding: 0 10px; */
}

.right-mapTools-btn {
    width: 42px;
    height: 42px;
    background: #ffffff;
    box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.24);
    border-radius: 4px;
    position: absolute;
    top: 85px;
    right: 15px;
    padding-top: 12px;
}

.right-mapTools-tab ul li {
    width: fit-content;
    /*border-bottom: 1px dashed #c3c3c3;*/
    display: list-item;
    text-align: center;
    padding: 5px 5px;
    cursor: pointer;
    margin: 5px 0;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px #e4e7ed;
    height: 55px;
    width: 55px;
}

.select {
    background: #1296db !important;
}
</style>
